<template>
  <div class="search">
    <van-search  @input="antiShaking" style="font-size: 16px;" v-model="keyword" shape="square" placeholder="请输入搜索关键词" />
    <!-- <FilterList :searchData="searchData"></FilterList> -->
        <van-card v-for="item in searchData.filterCategoryList" :origin-price="item.counterPrice" :key="item.id" :price="item.retailPrice" :desc="item.desc"
          :title="item.name" :thumb="item.picUrl" @click="goDetail(item.id)"/>
  </div>
</template>

<script>
import { searchAjax } from '@/api/search.js'
// import FilterList from '../components/filterList.vue'
export default {
  name: 'Search',
  components: {
    // FilterList
  },
  data () {
    return {
      keyword: '',
      searchData: {}
    }
  },
  watch: {
    searchData: {
      deep: true,
      immediate: true,
      handler (news, old) {
        console.log(news, old, this)
        this.$children.list = news
      }
    }
  },
  mounted () {
    console.log(this)
  },
  methods: {
    // 防抖函数
    antiShaking () {
      const that = this
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        that.getList()
      }, 400)
    },
    getList () {
      searchAjax({ keyword: this.keyword, page: 1, limit: 10 }).then(res => {
        console.log(res)
        this.searchData = res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}

</script>
<style scoped lang='scss'>
::v-deep .van-field__control{
  font-size: 16px;
  }
</style>
